<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
  <div id="app">
      <el-form :inline="true"  class="demo-form-inline" style="margin-left: 400px;margin-top: 40px">
          <el-form-item label="类别">
              <el-input v-model="searchUname" placeholder="类别"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="queryType">查询</el-button>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="addType">添加</el-button>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="empty">清空</el-button>
          </el-form-item>
      </el-form>

      <!--表格-->
      <template>
          <el-table
                  :data="type"
                  style="width: 100%;margin: 30px 400px ">
              <el-table-column
                      prop="tid"
                      label="编号"
                      width="180">
              </el-table-column>
              <el-table-column
                      prop="tname"
                      label="类别名"
                      width="180">
              </el-table-column>
              <el-table-column
                      prop="status"
                      label="状态"
                      width="180">
                  <template slot-scope="scope">
                      <span>{{scope.row.status==1?'可用':'不可用'}}</span>
                  </template>
              </el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="scope">
                      <el-button
                              @click="compile(scope.row)">编辑</el-button>
                      <el-popconfirm @confirm="confirmDel(scope.row,1)"
                                     title="你确定要启用该类别？">
                          <el-button   type="success" slot="reference">启用</el-button>
                      </el-popconfirm>
                      <el-popconfirm @confirm="confirmDel(scope.row,-1)"
                                     title="你确定要禁用该类别？">
                          <el-button   type="danger" slot="reference">禁用</el-button>
                      </el-popconfirm>
                  </template>
              </el-table-column>
          </el-table>
      </template>
      <div class="block" style="margin-left: 600px">
          <el-pagination
                  layout="prev, pager, next"
                  :page-size="page.size"
                  @current-change="changPage"
                  :total="page.total">
          </el-pagination>
      </div>


<!--
      弹框
-->
      <el-dialog
              title="提示"
              :visible.sync="centerDialogVisible"
              width="30%"
              @close="Close"
              center>
          <el-input v-model="compileObj.tname" placeholder="请输入内容"></el-input>
          <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateType">确 定</el-button>
  </span>
      </el-dialog>
  </div>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            page:{page:1,size:6,total:0},
            searchUname:"",
            type:'',
            centerDialogVisible: false,
            compileObj:''
        },
        methods:{
            onSubmit() {
                console.log('submit!');
            },
            //得到类别
            getAlltype(){
                axios.post(`../../type/getAlltypeBypage?page=${this.page.page}&size=${this.page.size}&searchUname=${this.searchUname}`).then(res=>{
                   this.type=res.data.data.records;
                   this.page.total=res.data.data.total;
                })
            },
            //清空
            empty(){
                this.searchUname="";
            },
            //添加
            addType(){
                axios.post(`../../type/addType?searchUname=${this.searchUname}`).then(res=>{
                    if(res.data.code==1){
                        this.$message.success(res.data.message);
                        this.page.page=1;
                        this.searchUname="";
                        this.getAlltype();
                    }else if(res.data.code==-1){
                        this.$message.error(res.data.message);
                        this.searchUname="";
                    }
                })
            },
            //修改类别
            updateType(){
                axios.post(`../../type/updateType`,this.compileObj).then(res=>{
                    if(res.data.code==1){
                        this.$message.success(res.data.message);
                    }else{
                        this.$message.error(res.data.message);
                    }
                    this.getAlltype();
                    this.centerDialogVisible=false;

                })
            },
            //删除
            confirmDel(item,index){
                axios.post(`../../other/typeinfo/delType?tid=${item.tid}&status=${index}`).then(res=>{
                  if(res.data.code==1){
                      this.$message.success(res.data.message);
                  }else{
                      this.$message.error(res.data.message);
                  }
                  this.getAlltype();
                })
            },
            //查询
            queryType(){
                this.page.page=1;
                this.getAlltype();
            },
            //分页查询
            changPage(page){
                this.page.page=page;
                this.getAlltype();
            },
            //编辑
            compile(item){
                this.centerDialogVisible=true;
                this.compileObj=JSON.stringify(item)
                this.compileObj=JSON.parse(this.compileObj);
            },
            //关闭弹框的
            Close(){
                this.compileObj="";
            }

        },
        created(){
            this.getAlltype();
        },

    })
</script>
</body>
</html>